<template>
  <a-row type="flex" justify="space-around" align="middle" style="height: 90vh">
    <div class="login-container">
      <a-card title="Welcome to login">
        <a-form :autoFormCreate="(form) => {this.form = form}"
                @submit="handleSubmit">
          <a-form-item fieldDecoratorId="username"
                       :fieldDecoratorOptions="{rules:[{required:true}]}">
            <a-input>
              <a-icon slot="prefix" type="user"/>
            </a-input>
          </a-form-item>

          <a-form-item fieldDecoratorId="password"
                       :fieldDecoratorOptions="{rules:[{required:true}]}">
            <a-input type="password">
              <a-icon slot="prefix" type="lock"/>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" block htmlType="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </a-row>
</template>

<script>
  import api from '../api'
  export default {
    name: 'login',
    data () {
      return {}
    },
    methods: {
      handleSubmit (e) {
        e.preventDefault()
        let self = this
        this.form.validateFields((err, values) => {
          if (!err) {
            api.login(values.username, values.password).then((resp) => {
              self.$store.commit('setUser', {user: resp.data.data})
              this.$message.success("Welcome to the Maki")
              this.$router.push({name: 'home'})
            })
          }
        })
      },
    }
  }
</script>

<style scoped>
  .login-container {
    height: 400px;
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
</style>
